class Carousel {
    constructor() {
        this.container = document.querySelector('.carousel-container');
        this.slides = document.querySelectorAll('.carousel-slide');
        this.prevButton = document.querySelector('.carousel-button.prev');
        this.nextButton = document.querySelector('.carousel-button.next');
        this.dotsContainer = document.querySelector('.carousel-dots');
        
        this.currentSlide = 0;
        this.slideCount = this.slides.length;
        this.isAnimating = false;
        
        this.init();
    }

    init() {
        // 创建指示点
        this.slides.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('carousel-dot');
            if (index === 0) dot.classList.add('active');
            dot.addEventListener('click', () => this.goToSlide(index));
            this.dotsContainer.appendChild(dot);
        });

        // 添加按钮事件
        this.prevButton.addEventListener('click', () => this.prevSlide());
        this.nextButton.addEventListener('click', () => this.nextSlide());

        // 自动播放
        this.startAutoPlay();
    }

    updateSlide() {
        // 如果是从最后一张到第一张，直接切换而不使用动画
        if (this.currentSlide === 0 && this.prevSlide === this.slideCount - 1) {
            this.container.style.transition = 'none';
            this.container.style.transform = 'translateX(0)';
        } else {
            this.container.style.transition = 'transform 0.5s ease-in-out';
            this.container.style.transform = `translateX(-${this.currentSlide * 33.333}%)`;
        }
        
        // 更新指示点
        const dots = this.dotsContainer.querySelectorAll('.carousel-dot');
        dots.forEach((dot, index) => {
            dot.classList.toggle('active', index === this.currentSlide);
        });
    }

    goToSlide(index) {
        if (this.isAnimating) return;
        this.isAnimating = true;
        this.prevSlide = this.currentSlide;
        this.currentSlide = index;
        this.updateSlide();
        setTimeout(() => {
            this.isAnimating = false;
        }, 500);
    }

    prevSlide() {
        if (this.isAnimating) return;
        this.isAnimating = true;
        this.prevSlide = this.currentSlide;
        this.currentSlide = (this.currentSlide - 1 + this.slideCount) % this.slideCount;
        this.updateSlide();
        setTimeout(() => {
            this.isAnimating = false;
        }, 500);
    }

    nextSlide() {
        if (this.isAnimating) return;
        this.isAnimating = true;
        this.prevSlide = this.currentSlide;
        this.currentSlide = (this.currentSlide + 1) % this.slideCount;
        this.updateSlide();
        setTimeout(() => {
            this.isAnimating = false;
        }, 500);
    }

    startAutoPlay() {
        setInterval(() => {
            if (!this.isAnimating) {
                this.nextSlide();
            }
        }, 5000); // 每5秒切换一次
    }
}

// 初始化轮播图
document.addEventListener('DOMContentLoaded', () => {
    new Carousel();
}); 